<!DOCTYPE html>
<html>
<head>

</head>
<body class="bgf6">
	
	<div class="main-nav">
		<div class="container">
			<ul class="nav-list clearfix">
				<li><a href="">首页</a></li>
			</ul>
		</div>
	</div>
	
	<div class="top-bar">
		<div th:include="common/commonHead :: atmBoHead"></div>
	</div>
	
	<div   class="main-body pb100">
		<div class="container pt10">
			<div class="dflx sbt">
				<div class="body-left bgff">
					<div th:include="common/commonLeft :: atmBoLeft"></div>
				</div>
				
				<div class="body-right">
					<div class="bread-nav bgff">
						<ul class="dflx">
							
						</ul>
					</div>


					<div id="atmBoApp" class="bgff mt10 pb20 edit-mode">
						<div class="wrap">
                            <div class="box">
                            	<div class="box-title"><span>工资单</span></div>
                            	<div class="mt20 f14">
									<form id="uploadSalaryForm" enctype="multipart/form-data">
										<div class="two">
											<span class="title"><i class="cred">*</i> 备注</span>
											<div class="content">
												<input type="text" class="form-control" name="remark" placeholder="请输入备注"/>
											</div>

											<span class="title"><i class="cred">*</i> 上传工资单 </span>
											<div class="content">
												<input type="file" class="form-control" name="salaryExcelFile" placeholder="请输入备注"/>
											</div>
										</div>
									</form>
                            	</div>
                            </div>
                            
                            <div class="tc mt40">
                            	<button type="button" class="btn btn-primary f12" onclick="uploadSalary()"> 上传 </button>
                            </div>

							<div>
								<el-dialog title="工资单详情" :visible.sync="dialogTableVisible">
									<el-table :data="allSalaryDetails">
										<el-table-column property="id" label="ID" width="150"></el-table-column>
										<el-table-column property="cardNum" label="银行卡号" width="200"></el-table-column>
										<el-table-column property="amount" label="金额（元）"></el-table-column>
									</el-table>
								</el-dialog>
							</div>


							<el-table
									stripe
									:data="allSalaryOrder"
									style="width: 100%">
								<el-table-column
										prop="salaryId"
										label="ID"
										width="180">
								</el-table-column>
								<el-table-column
										prop="remark"
										label="备注"
										width="180">
								</el-table-column>
								<el-table-column
										prop="createTime"
										label="创建时间">
								</el-table-column>
								<el-table-column
										prop="status"
										label="状态">
								</el-table-column>
								<el-table-column
										label="操作">
									<template slot-scope="scope">
										<el-button @click="loadSalaeryDetail(scope.row.salaryId)" type="text" size="small">查看</el-button>

									　　<shiro:hasRole name="CFO">　　
											<el-button @click="approval(scope.row, 2)" type="text" size="small">同意</el-button>
											<el-button @click="approval(scope.row, 3)" type="text" size="small">拒绝</el-button>
									　　</shiro:hasRole>

									</template>
								</el-table-column>
							</el-table>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>



	<script src="/js/jquery.min.js"></script>
	<script src="/js/jquery.form.js"></script>
	<script>


		new Vue({
			el : '#atmBoApp',
			data : {
				allSalaryOrder : [],
				allSalaryDetails : [],
				dialogTableVisible : false
			},
			created : function() {
				this.loadSalaryOrder();
			},
			methods : {
				approval : function(salary, approvalStatus) {
					alert(salary.salaryId + '-' + approvalStatus);
					var that = this;
					$.ajax({
						type : 'POST',
						dataType : 'JSON',
						url : '/salary/approval',
						data : {
							salaryId : salary.salaryId,
							approvalStatus : approvalStatus
						},
						success : function (result) {
							if (result.code != 1000){
								alert(result.message);
								return;
							}
							alert('操作成功！');
							//方案一：重新加载数据库最新的数据 拿到最新的状态
							// that.loadSalaryOrder();

							//方案二：直接将操作的salary对象的状态改掉，然后让Vue触发页面的渲染，就能看到最新的状态。
							//由于不用发请求查询数据库，所以要优于方案一。
							salary.status = approvalStatus;
						}
					});
				},

				loadSalaeryDetail : function(salaryId) {
					var that = this;
					$.ajax({
						type : 'POST',
						dataType : 'JSON',
						url : '/salary/loadSalaryDetail',
						data : {
							salaryId : salaryId
						},
						success : function (result) {
							if (result.code != 1000){
								alert(result.message);
								return;
							}

							that.allSalaryDetails = result.data;
							that.dialogTableVisible = true;
						}
					});
				},

				loadSalaryOrder : function () {
					var that = this;

					$.ajax({
						type : 'POST',
						dataType : 'JSON',
						url : '/salary/loadSalaryOrder',
						data : {
						},
						success : function (result) {
							if (result.code != 1000){
								alert(result.message);
								return;
							}

							that.allSalaryOrder = result.data;
						}
					});
				}
			}
		});
		function uploadSalary() {
			$('#uploadSalaryForm').ajaxSubmit({
				url : '/salary/uploadSalary',
				type : 'post',
				success: function (result) {
					if (result.code != 1000) {
						alert(result.message);
						return;
					}
					alert('上传成功');
				}
			})
		}

	</script>
</body>
</html>
